<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tree Column</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table-master/src/bootstrap-table.css">
    <link rel="stylesheet" href="bootstrap-table-master/src/extensions/tree-column/bootstrap-table-tree-column.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="bootstrap-table-master/src/bootstrap-table.js"></script>
    <script src="bootstrap-table-master/src/extensions/tree-column/bootstrap-table-tree-column.js"></script>
</head>

<body>
<div class="container">
    <h1>Tree Column</h1>
    <p></p>
    <table id="table" class="table table-hover">
        <thead>
        <tr>
            <th data-field="id">
                ID
            </th>
            <th data-field="pid">
                PID
            </th>
            <th data-field="name">
                Item Name
            </th>
            <th data-field="price">
                Item Price
            </th>
        </tr>
        </thead>
    </table>
</div>
<script>
    var $table = $('#table');

    $(function() {
        $table.bootstrapTable({
            treeShowField: 'name',
            url: 'data7.json'
        });
    });
</script>


</body>
</html>